import React, { useState } from 'react';
import { Input, Button, Space } from 'antd';  // 引入 Ant Design 的 Input 和 Button 组件

const SearchBar = () => {
    const [searchTerm, setSearchTerm] = useState('');

    const handleSearchChange = (event) => {
        setSearchTerm(event.target.value);
    };

    const handleSearchSubmit = () => {
        if (searchTerm.trim()) {
            // 将搜索关键词传递到 Bing 的搜索 URL
            const searchUrl = `https://www.bing.com/search?q=${encodeURIComponent(searchTerm)}`;
            window.location.href = searchUrl; // 跳转到 Bing 搜索页面
        } else {
            alert('Please enter a search term.');
        }
    };
    const handleKeyPress = (event) => {
        // 检查是否按下回车键 (Enter)
        if (event.key === 'Enter') {
            handleSearchSubmit();
        }
    };


    return (
        <header className="header" style={{ padding: '20px',  background: 'transparent'  }}>
            <div className="logo" style={{ fontSize: '24px', fontWeight: 'bold' }}>

            </div>
            <div className="search-box-container" style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', }}>
                <Space>
                    <Input
                        placeholder="Search..."
                        value={searchTerm}
                        onKeyPress={handleKeyPress}  // 监听回车键
                        onChange={handleSearchChange}
                        style={{ width: 300 }}  // 设置输入框的宽度
                    />
                    <Button
                        type="primary"
                        onClick={handleSearchSubmit}

                        style={{ height: '40px' }}
                    >
                        Search
                    </Button>
                </Space>
            </div>
        </header>
    );
};

export default SearchBar;
